<template>
  <div>
    <div class="commend">
      <search-banner :banners="banners"/>
      <function-area />
      <today-commend />
      <new-games />
      <div v-for="(list, index) in gameManage" :key="index">
        <discount-time v-if="list.style_id == '3' && list.list != null" :discountList="list"/>
        <commend-area v-else-if="list.style_id == '1' && list.list != null" :commendList="list"/>
        <special-banner v-else-if="list.style_id == 'table_plaque'" :list="list"/>
        <six-palace-grid v-else-if="list.style_id == '2' && list.list != null" :gridList="list"/>
        <!-- <discount-swiper v-if="list.style_id == '3' && list.list != null" :countDownList="list"/>
        <fire-area v-else-if="list.style_id == '1' && list.list != null" :fireArea="list"/>
        <show-banner v-else-if="list.style_id == 'table_plaque'" :showBanner="list"/>
        <hexagons v-else-if="list.style_id == '2' && list.list != null" :dataInfo="list"/> -->
      </div>
      <van-divider
        class="divider"
        :style="{
          color: '#999999',
          borderColor: '#999999',
          padding: '0 .213333rem',
        }"
      >
        今日推荐就到这里了!
      </van-divider>
    </div>
    <div class="search_icon" v-show="searchShow" @click="searchClick"></div>
  </div>
</template>

<script>
import FunctionArea from "../childComps/FunctionArea.vue";
import NewGames from "../childComps/NewGames.vue";
import SearchBanner from "../childComps/SearchBanner.vue";
import TodayCommend from "../childComps/TodayCommend.vue";
import CommendArea from "../childComps/CommendArea.vue";
import DiscountTime from "../childComps/DiscountTime.vue";
import SpecialBanner from "../childComps/SpecialBanner.vue";
import SixPalaceGrid from "../childComps/SixPalaceGrid.vue";
export default {
  components: {
    SearchBanner,
    FunctionArea,
    TodayCommend,
    NewGames,
    CommendArea,
    DiscountTime,
    SpecialBanner,
    SixPalaceGrid,
  },
  data() {
    return {
      searchShow: false,
      banners: [],
      gameManage: [],
    }
  },
  mounted() {
    var commend = document.querySelector(".commend");
    commend.onscroll = () => {
      //获取距离页面顶部的距离
      let toTop = document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(toTop);
      //div距离顶部的距离
      // console.log(commend.scrollTop);
      let scrollY = commend.scrollTop
      // console.log(scrollY);
      if(scrollY >= 50) {
        this.searchShow = true
      }else {
        this.searchShow = false
      }
    };
  },
  created () {
    this.getHomeCommend()
  },
  methods: {
    getHomeCommend() {
      this.axios.get('/home_commend.json').then(res => {
        this.banners = res.data.slider_list
        res.data.game_manage_1234.forEach(item => {
            if(item.style_id) {
              this.gameManage.push(item)
            }                             
          })
      })
    },
    searchClick() {
      this.$router.push('/search')
      this.searchShow = false
    }
  },
};
</script>,
    

<style lang="less" scoped>
.commend {
  position: fixed;
  width: 10rem;
  overflow: auto;
  top: 1.173333rem;
  bottom: 1.306667rem;
  left: 50%;
  transform: translateX(-50%);
}

.commend::-webkit-scrollbar {
  display: none;
}

.divider {
  font-size: 0.32rem;
  margin: 0.8rem 0;
}

.search_icon {
  position: fixed;
  right: 0.533333rem;
  top: 2rem;
  width: 1.066667rem;
  height: 1.066667rem;
  border-radius: 50%;
  background: url('../../../assets/img/home/icon_search.png') no-repeat;
  background-size: 1.066667rem 1.066667rem;
}
</style>